<template>
  <div :class="`tw-libcascader x${_uid}`">
    <label v-if="title" class="tw-libcascader-label">{{title}}:</label>
      <div class="tw-libcascader-data"  v-if="datetype">
        <el-cascader-panel
        v-model="val"
        @change="changeValue"
        @blur="blurValue"
        :placeholder="placeholder"
        :options="options"
        :props="propOptions"
        :size="size"
        :disabled="disabled"
        :separator="separator"
        :collapse-tags="collapsetags"
        :show-all-levels="showalllevels"
        :filterable="filterable"
        :popper-class="'xpoppercls-' + _uid"
        :clearable="clearable">
          <!-- <template slot-scope="{ node, data }">
            <span>{{ data.label }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template> -->
        </el-cascader-panel>
      <div v-if="validValue && errText" class="tw-validinput-err">{{errText}}</div>
    </div>
    <div class="tw-libcascader-data" v-else>
      <el-cascader
      v-model="val"
      @change="changeValue"
      @blur="blurValue"
      :placeholder="placeholder"
      :options="options"
      :props="propOptions"
      :size="size"
      :disabled="disabled"
      :separator="separator"
      :collapse-tags="collapsetags"
      :show-all-levels="showalllevels"
      :filterable="filterable"
      :popper-class="'xpoppercls-' + _uid"
      :clearable="clearable">
      </el-cascader>
      <div v-if="validValue && errText" class="tw-validinput-err">{{errText}}</div>
    </div>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'libdatepicker',

  props,

  data () {
    return {
      val: '',
      valdisabled: false,
      errText: ''
    }
  },

  methods: {
    blurValue () {
      this.validData('blur')
    },
    changeValue () {
      if (this.validData('change')) {
        this.$emit('input', this.val)
        this.$emit('change', this.val)
      }
    },
    validData (now) {
      let vm = this
      let errText = ''

      if (this.validValue && this.validRules.length > 0) {
        this.validRules.forEach((itm) => {
          let trigger = itm.trigger || 'blur'
          if (now === trigger) {
            if (itm.required !== undefined && itm.required && !vm.val) {
              errText = itm.message
            }
          }
        })
      }

      vm.errText = errText
      return !errText
    },

    setStyle () {
      let style = `
        .tw-libcascader.x${this._uid} .el-input__inner {
          color: ${this.color};
          background-color: ${this.bgColor};
          border-color: ${this.borderColor};
        }
        .tw-libcascader.x${this._uid} .el-input.is-active .el-input__inner, .tw-libcascader.x${this._uid} .el-input__inner:focus {
          border-color: ${this.focusBorderColor};
        }
        .el-cascader-panel .el-cascader-menu {
          min-width: 110px;
        }

        .x${this._uid} .tw-libcascader-label {
          width: ${this.labelWidth};
          line-height: ${this.titleHeight};
          font-weight: ${this.titleWeight};
        }
      `

      if (this.validValue) {
        style += `
          .x${this._uid} .tw-libcascader-label::before {
            content: "*";
            color: #f56c6c;
            margin-right: 4px;
          }

          .x${this._uid} .el-select.xerror .el-input__inner {
            border-color: #f56c6c;
          }
        `
      }

      if (this.fixBugHeight) { // fix bug 下拉框抖动
        style += `
          .tw-libcascader.x${this._uid} .el-input__inner {
            height: ${this.fixBugHeight};
          }
        `
      }

      if (this.sigleRow) {
         style += `
          .tw-libcascader.x${this._uid} .el-cascader__tags {
            flex-wrap: unset;
          }

          .tw-libcascader.x${this._uid} .el-cascader__tags .el-tag {
            max-width: ${this.tagMaxWidth};
          }
        `
      }

      style += `
        .el-popper.el-cascader__dropdown.xpoppercls-${this._uid} .el-cascader-menu__wrap {
          height: auto;
          padding-right: 17px;
          padding-bottom: 17px;
        }
      `

      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/\n/g, '')

      document.head.appendChild(styleEl)
    },
    disValue () {
      this.valdisabled = this.disabled
      if (this.validRules.length > 0) {
        this.validRules.forEach((itm) => {
          if (itm.disabled !== undefined && itm.disabled) {
            this.valdisabled = itm.disabled
          }
        })
      }
    }
  },

  computed: {
    style () {
      return {
        color: this.color,
        bgColor: this.bgColor,
        borderColor: this.borderColor,
        focusBorderColor: this.focusBorderColor
      }
    },
    defaulttime () {
      if (this.defaultime) {
        return this.defaultime.split(',')
      } else {
        return null
      }
    },
    propOptions () {
      if (this.usePropOption) {
        if (this.propOption !== '' && typeof this.propOption === 'function') {
          return this.propOption()
        } else {
          return { // 供参考
            multiple: this.multiple,
            checkStrictly: this.checkStrictly,
            expandTrigger: this.expandTrigger,
            emitPath: this.emitPath
          }
        }
      } else {
        return {
          multiple: this.multiple,
          checkStrictly: this.checkStrictly,
          expandTrigger: this.expandTrigger,
          emitPath: this.emitPath
        }
      }
    }
  },

  mounted () {
    this.val = this.value
    this.setStyle()
    this.disValue()
  },

  watch: {
    value () {
      this.val = this.value
    },
    validRules: {
      deep: true,
      handler () {
        this.disValue()
      }
    },

    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
